import React from 'react'
import { Text, StyleSheet } from 'react-native'
import PropTypes from 'prop-types'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'
import { ScaleT, ScaleS } from 'src/utils/ScreenUtil'
import CustomBoxShadow from '../../../../components/boxshadow/CustomBoxShadow'
import { ScaleT } from '../../../../utils/ScreenUtil'

export default function TitleInfoItem (props) {
  const {
    onPress, value, label, imgSrc, style
  } = props
  // return (
  //   <CustomButton style={style} onPress={onPress}>
  //     <Text style={styles.titleInfoItemVal}>{value}</Text>
  //     <Text style={styles.titleInfoItemLabel}>{label}</Text>
  //     <CustomImage style={styles.titleInfoItemImg} source={imgSrc}/>
  //   </CustomButton>
  // )
  return (
    <CustomButton style={style} onPress={onPress}>
      <CustomBoxShadow style={styles.boxShadow}>
        <Text style={styles.itemLabel}>{label}</Text>
        <Text style={styles.itemValue}>{value}</Text>
        <CustomImage style={styles.itemImg} source={imgSrc}/>
      </CustomBoxShadow>
    </CustomButton>
  )
}

TitleInfoItem.propTypes = {
  onPress: PropTypes.func,
  value: PropTypes.number,
  label: PropTypes.string,
  imgSrc: PropTypes.number,
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
}
TitleInfoItem.defaultProps = {
  value: 0
}
const styles = StyleSheet.create({
  titleInfoItemVal: {
    color: '#444444',
    fontSize: ScaleT(20),
    fontWeight: 'bold',
    marginLeft: ScaleS(8)
  },
  titleInfoItemLabel: {
    color: '#333333',
    fontSize: ScaleT(13),
    fontWeight: '400',
    marginTop: ScaleS(10),
    marginLeft: ScaleS(8)
  },
  titleInfoItemImg: {
    width: ScaleS(43),
    height: ScaleS(46),
    marginTop: ScaleS(16)
  },
  itemLabel: {
    color: '#444444',
    fontSize: ScaleT(16),
    fontWeight: '400'
  },
  itemValue: {
    color: '#000000',
    fontSize: ScaleT(28),
    fontWeight: 'bold',
    marginTop: ScaleS(14)
  },
  itemImg: {
    position: 'absolute',
    top: 0,
    right: 0,
    width: ScaleS(50),
    height: ScaleS(72)
  },
  boxShadow: {
    width: ScaleS(160),
    height: ScaleS(90),
    borderRadius: ScaleS(10),
    shadowRadius: ScaleS(59),
    shadowColor: '#E3E5EA',
    shadowOpacity: 0.67,
    shadowOffset: {
      width: 0,
      height: 2
    },
    padding: ScaleS(18),
    backgroundColor: 'white'
  }
})
